<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <user-card :user="user" />
      </el-col>

      <el-col :span="18" :xs="24">
        <el-card>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="修改账号基本信息" name="account">
              <account :user="user" />
            </el-tab-pane>
            <el-tab-pane label="修改登录密码" name="password">
              <password :user="user" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import UserCard from './components/UserCard'
import Account from './components/Account'
import Password from './components/Password'
import { getInfo } from '@/api/system/auth'

export default {
  name: 'Profile',
  components: { UserCard, Account, Password },
  data() {
    return {
      user: {
        id: 0,
        name: '',
        phone: '',
        role: '',
        avatar: ''
      },
      activeTab: 'account'
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      getInfo().then(res => {
        this.user = {
          id: res.id ?? 0,
          name: res.name ?? '',
          phone: res.phone ?? '',
          avatar: this.avatar,
          role: ''
          // name: this.name,
          // role: this.roles.join(' | '),
          // email: 'admin@test.com',
          // avatar: this.avatar
        }
      })
    }
  }
}
</script>
